<template>
    <van-sticky>
        <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <!-- <DropDown dictName="专项计划状态" type="状态" @change-conditions="handleConditionsChange"></DropDown> -->
    <van-pull-refresh v-model="loading.refresh" @refresh="onRefresh" success-text="刷新成功">
        <van-list v-model:loading="loading.load" :finished="finished" :finished-text="finishedText" @load="onLoad">
            <template v-if="list.length === 0 && (loading.load || loading.refresh)">
                <div v-for="i in 5" :key="i">
                    <van-cell-group inset class="skeleton-group">
                        <van-skeleton-paragraph row-width="90%" class="skeleton-item" />
                        <van-skeleton-paragraph row-width="40%" class="skeleton-item" />
                        <van-skeleton-paragraph row-width="70%" class="skeleton-item" />
                        <div class="skeleton-right">
                            <van-skeleton-paragraph row-width="50%" />
                        </div>
                    </van-cell-group>
                </div>
            </template>
            <div v-else v-for="item in list" :key="item.id" :title="item.name">
                <van-cell-group inset @click="cardClick(item)">
                    <van-row>
                        <van-col span="16" class="title-col">编号 {{ item.no }}</van-col>
                        <van-col span="8" class="status-col">
                            <van-tag :color="getStatusColor(item.status)" round class="status-tag">
                                {{ item.status }}
                            </van-tag>
                        </van-col>
                    </van-row>
                    <div class="content-div">
                        <span class="bold-span">名称：</span>
                        <span class="data-span">{{ item.name }}</span><br>
                        <span class="bold-span">期限：</span>
                        <span class="data-span">{{ item.period }}</span><br>
                    </div>
                    <div class="update-date-div">
                        更新时间：{{ item.updateDate }}
                    </div>
                </van-cell-group>
            </div>
        </van-list>
    </van-pull-refresh>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getStatusColor, convertDict, errorNotify } from '@/utils/Misc.js';
import DropDown from '@/components/DropDown.vue';
import zxlzAPI from '@/api/zxlz';
import { formatDeadline } from "@/utils/Format.js";
import { useRouter } from 'vue-router'
const router = useRouter();
import useStore from '@/store/index';
const store = useStore();
const title = ref("专项列表");
const list = ref([]);
const loading = ref({
    load: false,
    refresh: false,
});
const finished = ref(false);
const finishedText = ref("没有更多了");
const currentFilter = ref(null);
let pageNo = 0
let pageSize = 10
const onClickLeft = () => {
    router.push({ path: "/home" });
}
onMounted(() => {
    pageNo = 1;
    loading.value.load = true;
    getZhuangXiangList(pageNo);
});
const cardClick = (item) => {
    router.push({
        path: "/ZhuangXiang/detail",
        query: { id: item.id },
    });
}
const onRefresh = () => {
    pageNo = 1
    list.value = []
    loading.value.load = true
    loading.value.refresh = true
    currentFilter.value = null
    getZhuangXiangList(pageNo)
}
const onLoad = () => {
    pageNo++
    getZhuangXiangList(pageNo, currentFilter.value)
}
const handleConditionsChange = (value) => {
    pageNo = 1;
    list.value = [];
    loading.value.load = true;
    finished.value = false;
    currentFilter.value = value;
    getZhuangXiangList(pageNo, currentFilter.value);
}
const getZhuangXiangList = (pageNo, filterItems = null) => {
    const formData = {
        ...filterItems,
        responsibleId: store.user.departmentId,
        pageDto: {
            pageNo: pageNo,
            pageSize: 10,
            orderBy: 'updated_at desc'
        }
    }
    zxlzAPI.listPlan(formData).then(res => {
        const data = res.data.page.list;
        const newItems = data.map(element => ({
            id: element.id,
            no: "ZX" + element.createdAt.split("-").join("").replace(" ", "").split(":").join(""),
            name: element.name,
            period: formatDeadline(element.startAt, element.endAt),
            status: convertDict("专项计划状态", "v2l", element.status),
            updateDate: element.updatedAt,
        }));
        list.value = pageNo === 1 ? newItems : [...list.value, ...newItems];
        loading.value.load = false;
        loading.value.refresh = false;
        finished.value = data.length < pageSize;
    }).catch((error) => {
        errorNotify("ZhuangXiangList.vue", "getZhuangXiangList", error);
        loading.value.load = false;
        loading.value.refresh = false;
        finished.value = true;
        finishedText.value = '加载失败请重试';
    });
};
</script>
<style scoped>
.skeleton-group .skeleton-item {
    margin: 0 1rem 1.3rem 1rem;
}

.skeleton-right {
    display: flex;
    justify-content: flex-end;
    margin: 0 1rem;
}

:deep(.van-cell-group) {
    border: 1px solid #eee;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 1rem 0;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

:deep(.van-cell-group:active) {
    transform: translateY(1px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.title-col {
    font-weight: 600;
    padding-left: 1rem;
    padding-top: 0;
    margin-bottom: 1rem;
    color: #333;
}

.status-col {
    padding-top: 0;
    padding-right: 1.2rem;
    text-align: right;
}

.status-tag {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.content-div {
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 1.6;
}

.bold-span {
    font-weight: 600;
    display: inline-block;
    margin-bottom: 0.5rem;
    color: #555;
}

.data-span {
    color: #333;
    margin-bottom: 0.5rem;
}

.update-date-div {
    text-align: right;
    padding-right: 1.2rem;
    padding-bottom: 0;
    color: #999;
    font-size: 12px;
}
</style>